<template>
  <div class="newPurchase">
    <div class="header">
      <van-nav-bar title="新建采购" left-text="返回" left-arrow @click-left="onClickLeft" />  
    </div>
    <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
        基本信息
      </van-divider>
      <van-form @submit="onSubmit">
        <!-- 创建人 -->
      <van-field
        v-model="createName"
        name="用户名"
        label="创建人"
        placeholder=""
        readonly
      />
      <!-- 创建时间 -->
      <van-field v-model="createTime"
                    name="createTime"
                    placeholder="请选择创建时间"
                    label="创建时间"
                    :rules="[{ message: '请选择时间' }]">
                    <!-- #button 它是slot="button"的简写 -->
                    <template #button>
                        <van-button size="small" color="#1989fa" native-type='button' @click="showTime = true" type="primary">选择时间</van-button>
                    </template>
        </van-field>
        <!-- 项目名称 -->
        <van-field v-model="projectName"
                    name="projectName"
                    placeholder="请选择项目名称"
                    label="项目名称"
                    :rules="[{ message: '请选择项目' }]">
                    <!-- #button 它是slot="button"的简写 -->
                    <template #button>
                        <van-button size="small" color="#1989fa" native-type='button' @click="showProjectName = true" type="primary">选择项目</van-button>
                    </template>
        </van-field>
        <!-- 材料信息 -->
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
        材料信息
      </van-divider>
      <!-- 材料名称 -->
      <van-field v-model="materialName"
                    name="materialName"
                    placeholder="请选择材料名称"
                    label="材料名称"
                    :rules="[{ message: '请选择材料' }]">
                    <!-- #button 它是slot="button"的简写 -->
                    <template #button>
                        <van-button size="small" color="#1989fa" native-type='button' @click="showMaterialName = true" type="primary">选择材料</van-button>
                    </template>
        </van-field>
        <!-- 采购数量 -->
        <van-field
        v-model="materialNum"
        name="materialNum"
        label="采购数量"
        placeholder="请输入采购数量"
      />
      <!-- 计量单位 -->
      <van-collapse v-model="activeNames">
      <van-collapse-item title="计量单位" name="3" >11</van-collapse-item>
    </van-collapse>
      <!-- 采购单价 -->
      <van-field
        v-model="price"
        name="price"
        label="采购单价"
        placeholder="请输入采购单价"
      />
      <!-- 供应商信息 -->
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
        供应商信息
      </van-divider>
      <van-field v-model="supplierName"
                    name="supplierName"
                    placeholder="请选择供应商"
                    label="名称"
                    :rules="[{ message: '请选择供应商' }]">
                    <!-- #button 它是slot="button"的简写 -->
                    <template #button>
                        <van-button size="small" color="#1989fa" native-type='button' @click="showSupplierName = true" type="primary">请选择供应商</van-button>
                    </template>
        </van-field>
        <van-field
        v-model="supplierContact"
        name="supplierContact"
        label="联系人"
        placeholder="请输入联系人"
      />
      <van-field
        v-model="supplierPhone"
        name="supplierPhone"
        label="联系电话"
        placeholder="请输入联系电话"
      />
      <!-- 审批信息 -->
      <van-divider :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }">
        审批信息
      </van-divider>
      <van-field v-model="nextId"
                    name="nextId"
                    placeholder="请选择审批人"
                    label="审批人"
                    :rules="[{ message: '请选择审批人' }]">
                    <!-- #button 它是slot="button"的简写 -->
                    <template #button>
                        <van-button size="small" color="#1989fa" native-type='button' @click="showNextId = true" type="primary">请选择审批人</van-button>
                    </template>
        </van-field>
        <van-button type="primary" size="large"
      :style="{backgroundColor:'#1989fa',marginTop:'12px'}"
      round
      >提交</van-button>
    </van-form>
    <!-- 选择时间 -->
    <van-calendar v-model="showTime" @confirm="timePickEvt" />
    <!-- 选择项目 -->
    <van-popup v-model="showProjectName" position="right" :style="{ width: '90%', height: '100%' }">
            <div class="popup-list">
                <input type="text" v-model="projectName" placeholder="输入项目名字进行查询">
            </div>
        </van-popup>
    
  </div>
</template>

<script>
import moment from 'moment'
import { mapState } from 'vuex'
export default {
  data(){
    return {
        activeNames: ['1','2','3'],
        createTime:'',         //选择时间
        createName:'',          //创建人     
        projectName:'',        //选择项目  
        materialName:'',       //选择材料 
        materialNum:'',         //采购数量
        materialUnit:'',        //计量单位
        price:'',               //采购单价
        supplierName:'',        //供应商
        supplierContact:'',     //联系人
        supplierPhone:'',       //联系电话
        nextId:'',              //审批人
        showTime:false,         //显示时间
        showProjectName:false      //显示项目
        

    }
  },
  methods:{
     onClickLeft(){
      this.$router.push('/main')
    },
    //点击选择时间
    timePickEvt(date) {
       this.createTime = moment(date).format('yyyy-MM-DD')
        this.showTime = false
    },
    onSubmit(values){
      console.log(values);
    }
  },
  computed:{
    ...mapState('common',['userInfo'])
  },
  created(){
    this.createName = this.userInfo.name
  }
}
</script>

<style lang='less' scoped>
  .van-hairline--bottom {
  background-color: #6199ff;
}
.header/deep/ .van-nav-bar__arrow,
.header/deep/ .van-nav-bar__text,
.header/deep/ .van-nav-bar__title {
  color: #F2F2F2 !important;
  font-size: 20px;
}
</style>